@use 'sass:map';
// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
// // {$badge}
@use './common/var.scss' as *;

@import 'common/index.scss';

/* #ifdef H5 */
// iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除
[type='search']::-webkit-search-decoration {
	display: none;
}

/* #endif */
@include bem_b(search) {
	@include flex(row);
	align-items: center;
	flex: 1;
	@include bem_e(content) {
		@include flex;
		align-items: center;
		@include VueAndNvueStyleAttr('padding', 'search', 'padding');
		flex: 1;
		justify-content: space-between;
		border-width: 1px;
		border-color: transparent;
		border-style: solid;
		overflow: hidden;

		&__icon {
			@include flex;
			align-items: center;
		}

		&__label {
			@include VueAndNvueStyleAttr('color', 'search', 'label-color');
			@include VueAndNvueStyleAttr('font-size', 'search', 'label-font-size');
			@include VueAndNvueStyleAttr('margin', 'search', 'label-margin');
		}

		&__close {
			@include VueAndNvueStyleAttr('width', 'search', 'close-size');
			@include VueAndNvueStyleAttr('height', 'search', 'close-size');
			@include VueAndNvueStyleAttr('border-top-left-radius', 'search', 'close-radius');
			@include VueAndNvueStyleAttr('border-top-right-radius', 'search', 'close-radius');
			@include VueAndNvueStyleAttr('border-bottom-left-radius', 'search', 'close-radius');
			@include VueAndNvueStyleAttr('border-bottom-right-radius', 'search', 'close-radius');
			@include VueAndNvueStyleAttr('background-color', 'search', 'close-bgColor');
			@include flex(row);
			align-items: center;
			justify-content: center;
			@include VueAndNvueStyleAttr('transform', 'search', 'close-transform');
		}
		&__button {
			padding: 4px 0;
		}
		&__input-box{
			flex: 1;
			position: relative;
		}
		&__input-label{
			@include flex;
			align-items: center;
			padding: 0 10px;
			background: #B0B0B0;
			border-radius: 15px;
			position: absolute;
			left: 0;
			z-index: 1;
			&__text{
				margin-right: 5px;
				text{
					font-size: 12px;
					color: #fff;
				}
			}
		}
		&__input {
			
			@include VueAndNvueStyleAttr('font-size', 'search', 'font-size');
			@include VueAndNvueStyleAttr('margin', 'search', 'margin');
			@include VueAndNvueStyleAttr('color', 'search', 'color');
		}
	}

	@include bem_e(action) {
		@include VueAndNvueStyleAttr('font-size', 'search', 'action-font-size');
		@include VueAndNvueStyleAttr('color', 'search', 'action-color');
		@include VueAndNvueStyleAttr('width', 'search', 'action-width');
		overflow: hidden;
		transition-property: width;
		transition-duration: 0.3s;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		/* #endif */
		text-align: center;

		@include bem_m(active) {
			@include VueAndNvueStyleAttr('width', 'search', 'action-active-width');
			@include VueAndNvueStyleAttr('margin-left', 'search', 'action-margin-left');
		}
	}
}
